<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>宠雨秒杀</title>
		<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
		<script src="./layui/layui.js"></script>
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> -->
	</head>

	<body style="background-color: #FAFAFA;">

		<script src="https://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
		<script src="js/jquerysession.js"></script>
		<script src="./layui/layui.all.js"></script>

		<!-- 导航栏 -->
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<!-- 设置logo -->
				<div class="layui-logo">
					<a style="color: dodgerblue;" href="main.html">ChongYu SeckKill</a>
				</div>
				<!-- 左边导航栏 -->
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item">
						<a href="main.html">首页</a>
					</li>
				</ul>
				<!-- 右边导航栏 -->
				<ul id="view" class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="index.html">立即登录</a>
					</li>
				</ul>
			</div>
		</div>

    <!-- 生成替换模板 -->
		<script id="user" type="text/html">
		 <li class="layui-nav-item layui-this">
			 <a href="person.html">修改信息</a>
		 </li>
		 <li class="layui-nav-item">
			<a href="password.html">修改密码</a>
		</li>
		<li class="layui-nav-item">
			<a href="personlist.html">购物记录</a>
		</li>
		<li class="layui-nav-item">
			<a onclick="loginout()">注销退出</a>
		</li>
		</script>
    <!-- 生成替换模板 -->
		<script id="userfrom2" type="text/html">

			<form class="layui-form" action="">

				<nav style="text-align: center;">
					<h1>修改用户信息</h1>
				</nav>

				<div style="margin-top: 30px;" class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">已绑定手机</label>
						<div class="layui-input-inline">
						  <input type="tel" name="phone" value={{d.telphone}} lay-verify="required|phone" autocomplete="off" class="layui-input layui-disabled">
						</div>
					  </div>
				  </div>
	
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">用户名</label>
						<div class="layui-input-inline">
							<input type="text" value={{d.name}} name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
		
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">性别</label>
						<div class="layui-input-inline">
							<input id="sexq"  type="radio" name="sex" value="1" title="男">
							<input id="sexw"  type="radio" name="sex" value="2" title="女">
							<input id="sexe" type="radio" name="sex" value="0" title="未知">
						  </div>
					</div>
				</div>
	
				<div class="layui-form-item">
					<div class="layui-inline">
						<div class="layui-input-inline">
							<button type="button" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</div>
				
			  </form>
		</script>

		<!-- 准备修改个人用户的数据信息 -->
		<div id="userfrom" style="text-align: center;margin-top:50px;margin-left:350px;margin-right: 350px">
			<nav style="text-align: center;">
				<h1><a href="index.html">请您先登录!</a></h1>
			</nav>
		</div>

		<!-- 配置导航栏信息 -->
		<script>
			function loginout() {
				$.session.clear();
				window.location.href = 'main.html';
			}

			$(toview())


			function toview() {
				//第三步：渲染模版
				var laytpl = layui.laytpl;

				var getTpl = user.innerHTML,
					getTpl2 = userfrom2.innerHTML,
					view = document.getElementById('view'),
					userfrom = document.getElementById('userfrom'),
					data = $.session.get("user");

				if (data != null) {
					laytpl(getTpl).render(JSON.parse(data), function(html) {
						view.innerHTML = html;
					});
					laytpl(getTpl2).render(JSON.parse(data), function(html) {
						userfrom.innerHTML = html;
					
					// 实现对用户性别的原生提示
					if(JSON.parse(data).gender == 1){
						$("#sexq").prop("checked","true");
					}
					if(JSON.parse(data).gender == 2){
						$("#sexw").prop("checked","true");
					}
					if(JSON.parse(data).gender == 0){
						$("#sexe").prop("checked","true");
					}
					var form = layui.form;
					form.render();
					});
				}
			}

		</script>
				
	<script>
	  	layui.use(['form'], function(){
		var form = layui.form
		,layer = layui.layer
	   
		//自定义验证规则
		form.verify({
		  title: function(value){
			if(value.length < 5){
			  return '用户名至少得5个字符啊';
			}
		  }
		});
		
		//监听提交
		form.on('submit(demo1)', function(data){
			layer.msg('正在保存', {icon: 16, shade: 0.3, time:0});
			$.ajax({
				type : "post",
				async: false,
				url : "/user/updateinfo",
				data : data.field,
				dataType : "json",
				success: function (result) {
					if (result.data.code == 26) {
						$.session.clear();
						window.location.href = 'index.html';
					}else{
						alert(result.data.ms);
						window.location.href = 'person.html';
					}
				},
				error : function() {
					alert("更新失败！");
				}
			});
			// 防止提交两次
			return false;
		});
	});
	</script>

</body>
</html>
